<template>
  <div class="container">
    <div class="store-list" v-loading="loading">
      <div class="store-item flex-y-center" v-for="(item, index) in listData" :key="index" @click="toStoreDetail(item.id)">
        <el-image :src="item.firmImgs.split(',')[0] | formatFile" class="avatar"></el-image>
        <div class="info">
          <div class="name">{{ item.firmName }}</div>
          <div class="bottom-info flex-y-center">
            <div class="box">
              <span class="title">主营业务：</span>
              <span class="content">{{ item.mainBusiness }}</span>
            </div>
            <div class="box">
              <span class="title">服务区域：</span>
              <span class="content">{{item.province}}{{item.city}}{{item.area}}</span>
            </div>
            <div class="box">
              <span class="title">联系电话：</span>
              <span class="content">{{item.contactPhone}}</span>
            </div>
          </div>
        </div>

        <div class="collect flex-y-center">
            <img src="@/assets/img/icon-collect-1.png" alt="" />
            <span>收藏</span>
          </div>
      </div>
    </div>

    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
  </div>
</template>

<script>
import { storeRanking } from '@/api/store'
export default {
  name: "StoreList",

  data() {
    return {
      queryParams:{
					keyWord: '',
					pageNo: 1,
					pageSize: 10,
					sort: ''   //  1新晋榜
			},
      listData: [],
				total: 0,
    };
  },
  created(){
    this.getList()
  },
  methods: {
    toStoreDetail(id){
      this.$router.push('/storeDetail/storeList/' + id)
    },
    getList(){
				this.loading = true
				storeRanking(this.queryParams).then(res => {
					this.listData = res.result.records
					this.total = res.result.total
					this.loading = false
				})
			}
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto 30px;
}

.store-list {
  min-height: 500px;

  .store-item {
    position: relative;
    padding: 20px 30px;
    background: #fff;
    margin-bottom: 20px;

    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }

    .info {
      margin-left: 20px;

      .name {
        font-weight: bold;
        font-size: 16px;
        color: #333333;
      }

      .bottom-info {
        padding-top: 20px;

        .box {
          padding-right: 60px;
          font-weight: 400;
          font-size: 16px;
          .title {
            color: #808080;
          }

          .content {
            color: #333;
          }
        }
      }
    }

    
    .collect {
      position: absolute;
      right: 30px;
      top: 0;
          font-weight: 400;
          font-size: 16px;
          color: #818181;
          padding: 20px 0;
          cursor: pointer;

          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
          }
        }
  }
}
</style>
